<template>
  <div class="select-wrapper" :style="selectStyleObj" ref="select">
    <div class="select-field" :class="{'select-field-disabled': !disabled}">
      <input ref="search" type="text" class="select-field_text" v-model="selectValue" @focus="fieldFocus()" @blur="fieldBlur()" readonly>
      <div ref="icon" :class="{'select-field_icon_down': downIcon, 'select-field_icon_up': upIcon}" @mousedown.prevent="toggoleSelect()"></div>
    </div>
    <transition name="fade">
      <ul class="drop-area" v-if="options.length" :class="{'drop-area_show': upIcon}">
        <li class="drop-area_item" v-for="item in options"  @mousedown.prevent="selectDropValue(item)">{{item[showField]}}</li>
      </ul>
    </transition>
  </div>
</template>
<script>
  export default{
    props: {
      options: {
        type: Array,
        default: function () {
          return [];
        }
      },
      defaultValue: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      showField: {
        type: String,
        default: 'value'
      },
      selectStyleObj: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    data () {
      return {
        defaultIcon: true,
        selectValue: ''
      };
    },
    computed: {
      upIcon: function () {
        return !this.defaultIcon;
      },
      downIcon: function () {
        return this.defaultIcon;
      }
    },
    methods: {
      toggoleSelect: function () {
        if (this.defaultIcon) {
          this.$refs.search.focus();
        } else {
          this.$refs.search.blur();
        }
      },
      selectDropValue: function (item) {
        this.selectValue = item[this.showField];
        this.$refs.search.blur();
        this.$emit('select', item);
      },
      fieldFocus: function () {
        this.defaultIcon = false;
      },
      fieldBlur: function () {
        this.defaultIcon = true;
      }
    },
    mounted: function () {
      if (this.disabled) {
        this.$refs.search.setAttribute('disabled', '');
      } else {
        this.$refs.search.removeAttribute('disabled');
      }
      this.selectValue = this.defaultValue;
    },
    filters: {
    }
  };
</script>
<style scoped>
  div.select-wrapper{
    position: relative;
    display: inline-block;
    width: 200px;
    height: 30px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }
  div.select-wrapper>div.select-field{
    position: relative;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid rgba(191,203,217,1);
    outline: rgba(123,156,211, 1);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  div.select-wrapper>div.select-field-disabled:hover{
    border-color: rgba(134,148,167,1);
  }
  div.select-wrapper>div.select-field>input{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    text-indent: 5px;
    cursor: pointer;
  }

  div.select-wrapper>div.select-field>input[disabled]{
    cursor: not-allowed;
    background-color: rgba(238,241,246,1);
  }

  div.select-wrapper>div.select-field>.select-field_icon_down{
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    height: 0;
    /*transition: all 0.5s linear;*/
    transform: translate(0, -50%);
    border-top: 10px solid rgba(169,169,169,1);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  div.select-wrapper>div.select-field>.select-field_icon_up{
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    height: 0;
    transform: translate(0, -50%);
    border-bottom: 10px solid rgba(169,169,169,1);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  div.select-wrapper>ul.drop-area{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(191,203,217,1);
    border-top: none;
    display: none;
    list-style: none;
    background-color: rgba(255,255,255,1);
    z-index: 1000;
  }

  div.select-wrapper>ul.drop-area_show{
    display: block;
  }

  div.select-wrapper>ul.drop-area_show>li.drop-area_item{
    text-indent: 5px;
    text-align: left;
    padding: 5px 0;
    color: black;
    background-color: white;
  }

  div.select-wrapper>ul.drop-area_show>li.drop-area_item:nth-child(2n+1){
    /*background-color: rgba(211,211,211,0.4);*/
  }

  div.select-wrapper>ul.drop-area_show>li.drop-area_item:hover{
    background-color: lightblue;
    cursor: pointer;
  }


  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>
